<template>
  <div class="message-list-skeleton">
    <div class="skeleton-item" v-for="i in count" :key="i">
      <div class="skeleton-icon"></div>
      <div class="skeleton-content">
        <div class="skeleton-title"></div>
        <div class="skeleton-text"></div>
        <div class="skeleton-text short"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageListSkeleton',
  props: {
    count: {
      type: Number,
      default: 3
    }
  }
}
</script>

<style scoped>
.message-list-skeleton {
  padding: 8px 0;
}

.skeleton-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.skeleton-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.skeleton-icon::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: skeleton-wave 1.6s linear 0.5s infinite;
}

.skeleton-content {
  flex: 1;
}

.skeleton-title {
  height: 16px;
  width: 70%;
  background-color: #f2f2f2;
  margin-bottom: 8px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: skeleton-wave 1.6s linear 0.5s infinite;
}

.skeleton-text {
  height: 12px;
  width: 90%;
  background-color: #f2f2f2;
  margin-bottom: 8px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.skeleton-text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: skeleton-wave 1.6s linear 0.5s infinite;
}

.skeleton-text.short {
  width: 40%;
}

@keyframes skeleton-wave {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style> 